<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Choose the modules that you need.">
        <title>Customize &ndash; Pure</title>
        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
        <!--[if lte IE 8]>
        <link rel="stylesheet" href="/combo/1.11.5?/css/main-grid-old-ie.css&/css/main-old-ie.css&/css/customize.css&/css/rainbow/baby-blue.css">
        <![endif]-->
        <!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="/combo/1.11.5?/css/main-grid.css&/css/main.css&/css/customize.css&/css/rainbow/baby-blue.css">
        <!--<![endif]-->
        <!--[if lt IE 9]>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
        <![endif]-->
        <script src="http://use.typekit.net/gis6vng.js"></script>
        <script>
            try { Typekit.load(); } catch (e) {}
        </script>
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-41480445-1', 'purecss.io');
            ga('send', 'pageview');
        </script>
    </head>
    <body>
        <div id="layout">
            <a href="#menu" id="menuLink" class="menu-link">
            <span></span>
            </a>
            <div id="menu">
                <div class="pure-menu pure-menu-open">
                    <a class="pure-menu-heading" href="/">Pure</a>
                    <ul>
                        <li class=" ">
                            <a href="/base/">Base</a>
                        </li>
                        <li class=" ">
                            <a href="/grids/">Grids</a>
                        </li>
                        <li class=" ">
                            <a href="/forms/">Forms</a>
                        </li>
                        <li class=" ">
                            <a href="/buttons/">Buttons</a>
                        </li>
                        <li class=" ">
                            <a href="/tables/">Tables</a>
                        </li>
                        <li class=" ">
                            <a href="/menus/">Menus</a>
                        </li>
                        <li class="menu-item-divided ">
                            <a href="/layouts/">Layouts</a>
                        </li>
                        <li class=" ">
                            <a href="/tools/">Tools</a>
                        </li>
                        <li class=" pure-menu-selected">
                            <a href="/customize/">Customize</a>
                        </li>
                        <li class=" ">
                            <a href="/extend/">Extend</a>
                        </li>
                        <li>
                            <a href="http://blog.purecss.io/">Blog</a>
                        </li>
                        <li>
                            <a href="https://github.com/yui/pure/releases/">Releases</a>
                        </li>
                        <li class="menu-item-divided">
                            <a href="http://yui.github.io/skinbuilder/?mode=pure">Skin Builder</a>
                        </li>
                        <li>
                            <a href="http://yuilibrary.com/">YUI Library</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="main">
                <div class="header">
                    <h1>Customize</h1>
                    <h2>Choose the modules that you need.</h2>
                </div>
                <div class="content">
                    <h2 id="rollups" class="content-subhead">Rollups<a href="#rollups" class="content-link"></a></h2>
                    <p>
                        Rollups consist of all the modules in Pure. There are two rollups available - a regular (responsive) one, and a non-responsive one. Choose that one that's right for your project.
                    </p>
                    <div class="table-responsive">
                        <table class="pure-table pure-table-bordered">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>URL</th>
                                    <th>Size (gzip)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Responsive Rollup</td>
                                    <td>http://yui.yahooapis.com/pure/0.4.2/pure-min.css</td>
                                    <td>4.5KB</td>
                                </tr>
                                <tr>
                                    <td>Non-Responsive Rollup</td>
                                    <td>http://yui.yahooapis.com/pure/0.4.2/pure-nr-min.css</td>
                                    <td>4.2KB</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <h3>Alternate CDNs</h3>
                    <p>
                        The main host for Pure is the Yahoo! CDN where Pure is available over HTTP and individual modules can be combined together in a single combo request. The following table lists alternate CDNs where Pure is hosted.
                    </p>
                    <div class="table-responsive">
                        <table class="pure-table pure-table-bordered">
                            <thead>
                                <tr>
                                    <th>CDN</th>
                                    <th>URL</th>
                                    <th>HTTPS</th>
                                    <th>Combo</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><a href="http://cdnjs.com/">cdnjs</a></td>
                                    <td>//cdnjs.cloudflare.com/ajax/libs/pure/0.4.2/pure-min.css</td>
                                    <td>Yes</td>
                                    <td>No</td>
                                </tr>
                                <tr>
                                    <td><a href="http://www.osscdn.com/">OSS MaxCDN</a></td>
                                    <td>//oss.maxcdn.com/libs/pure/0.4.2/pure-min.css</td>
                                    <td>Yes</td>
                                    <td>No</td>
                                </tr>
                                <tr>
                                    <td><a href="http://www.staticfile.org/">Staticfile</a></td>
                                    <td>http://cdn.staticfile.org/pure/0.4.2/pure-min.css</td>
                                    <td>No</td>
                                    <td>No</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <p>
                        <b>Note:</b> If the latest version of Pure is not yet on one of the alternate CDNs, please contact them to update to the latest version of Pure: <b>0.4.2</b>.
                    </p>
                    <h2 id="individual-modules" class="content-subhead">Individual Modules<a href="#individual-modules" class="content-link"></a></h2>
                    <p>
                        You can also pull in the modules individually. The Yahoo! CDN supports combo handling, so you can combo your requests and get a single CSS file back. Here's an example of a combo URL that only includes CSS for <a href="/base/">Base</a>, <a href="/grids/">Grids</a>, and <a href="/forms/">Forms</a>:
                    </p>
                    <pre class="code code-wrap" data-language="html"><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;http://yui.yahooapis.com/combo?pure/0.4.2/base-min.css&amp;pure/0.4.2/grids-min.css&amp;pure/0.4.2/forms-min.css&quot;&gt;</code></pre>
                    <div class="table-responsive">
                        <table class="pure-table pure-table-bordered">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>URL</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Base</td>
                                    <td>http://yui.yahooapis.com/pure/0.4.2/base-min.css</td>
                                </tr>
                                <tr>
                                    <td>Buttons</td>
                                    <td>http://yui.yahooapis.com/pure/0.4.2/buttons-min.css</td>
                                </tr>
                                <tr>
                                    <td>Forms (Responsive)</td>
                                    <td>http://yui.yahooapis.com/pure/0.4.2/forms-min.css</td>
                                </tr>
                                <tr>
                                    <td>Forms (Non-Responsive)</td>
                                    <td>http://yui.yahooapis.com/pure/0.4.2/forms-nr-min.css</td>
                                </tr>
                                <tr>
                                    <td>Grids (Responsive)</td>
                                    <td>http://yui.yahooapis.com/pure/0.4.2/grids-min.css</td>
                                </tr>
                                <tr>
                                    <td>Grids (Non-Responsive)</td>
                                    <td>http://yui.yahooapis.com/pure/0.4.2/grids-nr-min.css</td>
                                </tr>
                                <tr>
                                    <td>Menus (Responsive)</td>
                                    <td>http://yui.yahooapis.com/pure/0.4.2/menus-min.css</td>
                                </tr>
                                <tr>
                                    <td>Menus (Non-Responsive)</td>
                                    <td>http://yui.yahooapis.com/pure/0.4.2/menus-nr-min.css</td>
                                </tr>
                                <tr>
                                    <td>Tables</td>
                                    <td>http://yui.yahooapis.com/pure/0.4.2/tables-min.css</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <h2 id="skinning" class="content-subhead">Skinning<a href="#skinning" class="content-link"></a></h2>
                    <p>
                        Pure comes with a minimalistic style that allows you to customize it with your own CSS. The <a href="https://git.corp.yahoo.com/pages/yui/skinbuilder/">YUI Skin Builder</a> is a great tool to use if you need help developing a theme. With a single click, the Skin Builder is able to generate all the CSS necessary to theme Pure.
                    </p>
                    <p>
                        <a href="http://yui.github.io/skinbuilder/?mode=pure" class="pure-button">Launch Skin Builder</a>
                    </p>
                    <h2 id="contribute-on-github" class="content-subhead">Contribute on GitHub<a href="#contribute-on-github" class="content-link"></a></h2>
                    <p>
                        Pure is an open-source project under the BSD License. We welcome issues, pull requests, and feedback. Check out our <a href="https://github.com/yui/pure">repo on GitHub</a>.
                    </p>
                </div>
                <div class="footer">
                    <div class="legal pure-g">
                        <div class="pure-u-1 pure-u-sm-1-2">
                            <p class="legal-license">
                                This site is built with &lt;3 using Pure v0.4.2<br>
                                All code on this site is licensed under the <a href="https://github.com/yui/pure-site/blob/master/LICENSE.md">Yahoo BSD License</a> unless stated.
                            </p>
                        </div>
                        <div class="pure-u-1 pure-u-sm-1-2">
                            <ul class="legal-links">
                                <li><a href="https://github.com/yui/pure/">GitHub Project</a></li>
                                <li><a href="http://yuilibrary.com/security/">Security Contact Info</a></li>
                            </ul>
                            <p class="legal-copyright">
                                &copy; 2014 Yahoo! Inc. All rights reserved.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="/combo/1.11.5?/js/ui.js&/vendor/rainbow/js/rainbow.min.js&/vendor/rainbow/js/language/generic.js&/vendor/rainbow/js/language/html.js&/vendor/rainbow/js/language/css.js&/vendor/rainbow/js/language/javascript.js&/vendor/rainbow/js/language/shell.js"></script>
    </body>
</html>
